<template>
    <view class="page-item flex flex-v-center" @click="pageClick">
        <image v-if="icon" class="icon" :class="icon" :src="`../../../../static/tabBar/mine/`+icon+`.png`"  mode=""></image>
        <view class="page-name bold">{{pageName}}</view>
        <slot></slot>
    </view>
</template>
<script>
export default {
    name: 'PageItem',
    data() {
        return {};
    },
    props: {
        icon: {
            ype: String,
            default: ''
        },
        pageName:{
            ype: String,
            default: ''
        }
    },
    computed: {},
    onLoad() {},
    onShow() {},
    methods: {
        pageClick(){
            this.$emit('pageClick')
        }
    },
    watch: {},
    components: {}
};
</script>
<style lang="scss" scoped>
.page-item {
    width: 336rpx;
    height: 141rpx;
    background-color: #ffffff;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(234, 234, 234, 0.5);
    border-radius: 10rpx;
    position: relative;
    .icon{
        width: 64rpx;
        margin-left: 58rpx;
        margin-right: 30rpx;
        will-change: transform;
    }
    .page-name{
        font-size: 30rpx;
        line-height:30rpx ;
    }
    .icon0{
        width: 64rpx;
        height: 50rpx;
    }
    .icon1{
        width: 64rpx;
        height: 54rpx;
    }
    .icon2{
        width: 60rpx;
        height: 62rpx;
    }
    .icon3{
        width: 60rpx;
        height: 60rpx;
    }
    .tobePaid{
        width: 64rpx;
        height: 52rpx;
    }
    .upload{
        width: 64rpx;
        height: 64rpx;
    }
}
</style>
